// var oLoginBox = document.getElementsByClassName('main')[0].getElementsByClassName('login')[0];
// var oUserBox = document.getElementsByClassName('main')[0].getElementsByClassName('user')[0];
// var oImg = oUserBox.getElementsByTagName('img')[0];
// var out = oUserBox.getElementsByClassName('outbtn')[0];


// //检查登录转换头像 
// //检查网页本地 是否有登录成功的信息
// async function check() {
//     let token = localStorage.getItem('token');
//     if (token) {
//         oLoginBox.style.display = 'none';
//         oUserBox.style.display = 'inline-block';
//         let  [,{result:[{head_photo_url}]}] = await myajax({
//             url: '/api/usercenter',
//         })
//         console.log(head_photo_url);
//         if (head_photo_url) {
//             oImg.src = head_photo_url;
//         }
//     }
// }
// check();

// //退出登录
// out.onclick = function () {
//     localStorage.removeItem('token');
//     location.reload();
// }

//轮播条效果
var oBanner = document.getElementById('banbox');
var oListUl = oBanner.getElementsByClassName('list')[0];
var oImgUl = oBanner.getElementsByClassName('img')[0];
var imghtml = '';
var listhtml = '';



async function ff1() {
    let [, { result: bannerData }] = await myajax({ url: '/api/banner' });

    for (var i = 0; i < bannerData.length; i++) {
        imghtml += `<li><img src="${bannerData[i].image_src}" alt=""></li>`;
        listhtml += `<li>${bannerData[i].title}</li>`
        
    }
    oImgUl.innerHTML = imghtml;
    oListUl.innerHTML = listhtml;

    var aImgLi = oImgUl.getElementsByTagName('li');
    var aListLi = oListUl.getElementsByTagName('li');
    aImgLi[0].className = 'active';
    aListLi[0].className = 'high';

    var n = 0;
    var imgLength = aImgLi.length;
    var listLength = aListLi.length;
    var timer = null;

    function play() {
        timer = setInterval(function () {
            myTool.bufferMove(aImgLi[n], { 'opacity': 0 });
            n++;
            if (n >= imgLength) {
                n = 0;
            }
            myTool.bufferMove(aImgLi[n], { 'opacity': 100 });

            //旁边的标题也会随着变化
            for (var i = 0; i < listLength; i++) {
                aListLi[i].className = '';
            }
            aListLi[n].className = 'high';
        }, 1000);
    }


    play();
    oImgUl.onmouseenter = function () {
        clearInterval(timer);
    }

    oImgUl.onmouseleave = function () {
        play();
    }

    for (var i = 0; i < aListLi.length; i++) {
        aListLi[i].index = i;
        aListLi[i].onmouseenter = function () {
            clearInterval(timer);
            myTool.bufferMove(aImgLi[n], { 'opacity': 0 })
            n = this.index;
            myTool.bufferMove(aImgLi[n], { 'opacity': 100 });
            for (var i = 0; i < aListLi.length; i++) {
                aListLi[i].className = '';
            }
            aListLi[n].className = 'high'
        }

        aListLi[i].onmouseleave = function () {
            play();
        }
    }

}
ff1();
// for (var i = 0; i < bannerData.length; i++) {
//     imghtml += `<li><img src="${bannerData[i].image_src}" alt=""></li>`;
//     listhtml += `<li>${bannerData[i].title}</li>`
// }

// oImgUl.innerHTML = imghtml;
// oListUl.innerHTML = listhtml;

// var aImgLi = oImgUl.getElementsByTagName('li');
// var aListLi = oListUl.getElementsByTagName('li');
// aImgLi[0].className = 'active';
// aListLi[0].className = 'high';

// var n = 0;
// var imgLength = aImgLi.length;
// var listLength = aListLi.length;
// var timer = null;

// function play() {
//     timer = setInterval(function () {
//         myTool.bufferMove(aImgLi[n], { 'opacity': 0 });
//         n++;
//         if (n >= imgLength) {
//             n = 0;
//         }
//         myTool.bufferMove(aImgLi[n], { 'opacity': 100 });

//         //旁边的标题也会随着变化
//         for(var i=0;i<listLength;i++){
//             aListLi[i].className='';
//         }
//         aListLi[n].className='high';
//     }, 1000);
// }


// play();
// oImgUl.onmouseenter = function () {
//     clearInterval(timer);
// }

// oImgUl.onmouseleave = function () {
//     play();
// }

// for(var i=0;i<aListLi.length;i++){
//     aListLi[i].index=i;
//     aListLi[i].onmouseenter=function(){
//         clearInterval(timer);
//         myTool.bufferMove(aImgLi[n],{'opacity':0})
//         n=this.index;
//         console.log(n);
//         myTool.bufferMove(aImgLi[n],{'opacity':100});
//         for(var i=0;i<aListLi.length;i++){
//             aListLi[i].className='';
//         }
//         aListLi[n].className='high'
//     }

//     aListLi[i].onmouseleave=function(){
//        play();
//     }
// }

//轮播条效果模块结束



//同步课程，在线测试，精品课程模块
var oOnline = document.getElementsByClassName('online')[0];
var onlineUl = oOnline.getElementsByClassName('content')[0].getElementsByTagName('ul')[0];
var oTest = document.getElementsByClassName('testClass')[0];
var testUl = oTest.getElementsByClassName('content')[0].getElementsByTagName('ul')[0];
var oGood = document.getElementsByClassName('goodClass')[0];
var goodUl = oGood.getElementsByClassName('content')[0].getElementsByTagName('ul')[0];


//online和good的渲染函数得到html字符串
function render(arr) {
    var html = '';
    for (var i = 0; i < arr.length; i++) {
        let t=arr[i].intro.split('·')[2];
        html += `<li cid="${arr[i].cid}">
        <div class="top">
            <span class="rj">${arr[i].type_name}</span>
            <img src="${arr[i].image_src}" alt="" class="m">
            <p>10001人在学习</p>
        </div>
        <div class="bottom">
            <div class="left">
                <span>${arr[i].title}</span>
                <span class="time">${t}</span>
            </div>
            <div class="right">${arr[i].price ==0 ? '免费学习' : '付费学习'}</div>
        </div>
    </li>`
    }
    return html;
}


//test的渲染函数得到html字符串
function renderTest(arr) {
    var html = '';
    for (var i = 0; i < arr.length; i++) {
        let t=arr[i].intro.split('每')[1];
  
        html += ` <li cid="${arr[i].cid}">
        <div class="top">
            <span class="rj">${arr[i].area_name}</span>
            <img src="${arr[i].image_src}" alt="" class="m">
            <p>
                <span>1001人已考试</span>
                <span>${t}</span>
            </p>
        </div>
        <div class="bottom">
            <div class="left">
                <span>${arr[i].title}</span>
            </div>
            <div class="right">去考试</div>
        </div>
    </li>`
    }
    return html;
}
//获取data数据

async function ff2() {
    let [, { result: online }] = await myajax({ url: '/api/online' });
    let [, { result: good }] = await myajax({ url: '/api/good' });
    let [, { result: test }] = await myajax({ url: '/api/test' });

    //将online和good的html渲染出来
    onlineUl.innerHTML = render(online);
    goodUl.innerHTML = render(good);
    testUl.innerHTML = renderTest(test);
}
ff2()

//点击每个同步课程，跳转到相应的课程详情页面
$('#online').on('click','li',function(){
    // let cid=this.getAttribute('cid');
    let cid=$(this).attr('cid');
    location=`./pages/videoDetail.html?cid=${cid}`;
})

//点击每个练习课程，跳转到相应的课程详情页面
$('#test').on('click','li',function(){
    // let cid=this.getAttribute('cid');
    let cid=$(this).attr('cid');
    location.href=`./pages/videoDetail.html?cid=${cid}`;
})


//点击每个精品课程，跳转到相应的课程详情页面
$('#good').on('click','li',function(){
    // let cid=this.getAttribute('cid');
    let cid=$(this).attr('cid');
    location.href=`./pages/videoDetail.html?cid=${cid}`;
})

//搜素跳转
var oSearchBtn = document.getElementById('searchBtn');

oSearchBtn.onclick = function () {
    let keyword=$('#searchIn').val();
    if(!keyword){
        let ans=confirm('您没有输入关键字，则默认搜索所有课程信息，请确认是否继续？');
        if(ans){
            window.location.href = `./pages/searchlist.html?keyword=${keyword}`;
        }
        return;
    }
    window.location.href = `./pages/searchlist.html?keyword=${keyword}`;
}









